<template>
  <div class="container">
    <div class="wrapper">
      <div class="section" v-for="item in list" :key="item.id">
        <div style="width:100% height: 200px">{{ item.name }}</div>
      </div>
    </div>
    <div class="nac" style="height:500px"></div>
    <nav>
      <el-tabs
        v-model="activeName"
        :tab-position="tabPosition"
        style="height: 200px"
      >
        <el-tab-pane
          v-for="item in list"
          :key="item.id"
          :name="'tab' + item.id"
          :label="item.name"
        ></el-tab-pane>
      </el-tabs>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "tab0",
      tabPosition: "right",
      list: [
        { id: 0, name: "用户管理" },
        { id: 1, name: "用户管理" },
        { id: 2, name: "用户管理" },
        { id: 3, name: "用户管理" },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handlelClick(tab, event) {
      console.log(tab, event);
    },
    dataScroll() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
    },
    jump(index) {
      let jump = document.querySelector(".section");
      let total = jump[index].offsetTop;
      document.body.scrollTop = total;
      document.documentElement.scrollTop = total;
      window.pageYOffset = total;
    },
    loadScroll() {
      var self = this;
      var sections = document.querySelector(".section");
      for (var i = sections.length - 1; i >= 0; i--) {
        if (self.scroll >= sections[i].offsetTop - 100) {
          self.activeName = "tab" + i;
          break;
        }
      }
    },
  },
  watch: {
    scroll() {
      this.loadScroll();
    },
  },
  mounted() {
    window.addEventListener("scroll", this.dataScroll);
  },
};
</script>

<style></style>
